<template>
  <el-dialog
    :model-value="visible"
    @update:model-value="$emit('update:visible', $event)"
    title="查看详情"
    width="1100px"
    @close="handleClose"
  >
    <div class="main-content-container">
      <!-- 左侧选项卡 -->
      <div class="left-sidebar">
        <div class="tab-container">
          <div 
            v-for="tab in currentTabsList" 
            :key="tab.name"
            class="tab-item" 
            :class="{ active: activeTab === tab.name }"
            @click="handleTabClick(tab)"
          >
            <span class="tab-text">{{ tab.label }}</span>
          </div>
        </div>
      </div>

      <!-- 中间分割线 -->
      <div class="divider"></div>

      <!-- 右侧内容区域 -->
      <div class="right-content">
        <!-- 基本信息 -->
        <div v-if="activeTab === 'basic'" class="form-content">
          <el-descriptions :column="1" border class="custom-descriptions">
            <el-descriptions-item label="统一社会信用代码" class-name="my-content">
              <span>{{ formattedCustomerData?.creditCode || '-' }}</span>
            </el-descriptions-item>

            <el-descriptions-item label="公司名称" class-name="my-content">
              <span>{{ formattedCustomerData?.companyName || '-' }}</span>
            </el-descriptions-item>

            <el-descriptions-item label="注册资本(万元)" class-name="my-content">
              <span>{{ formattedCustomerData?.registeredCapital || '-' }}</span>
            </el-descriptions-item>

            <el-descriptions-item label="注册地址" class-name="my-content">
              <span>{{ formattedCustomerData?.registeredAddress || '-' }}</span>
            </el-descriptions-item>

            <el-descriptions-item label="主营业务" class-name="my-content"> 
              <span>{{ formattedCustomerData?.mainBusiness || '-' }}</span>
            </el-descriptions-item>

            <el-descriptions-item label="默认交货地址" class-name="my-content">
              <span>{{ formattedCustomerData?.deliveryAddress || '-' }}</span>
            </el-descriptions-item>

            <el-descriptions-item label="联系人" class-name="my-content">
              <span>{{ formattedCustomerData?.contactPerson || '-' }}</span>
            </el-descriptions-item>

            <el-descriptions-item label="联系方式" class-name="my-content">
              <span>{{ formattedCustomerData?.contactPhone || '-' }}</span>
            </el-descriptions-item>
          </el-descriptions>
        </div>

        <!-- 财务信息 -->
        <div v-if="activeTab === 'financial'" class="form-content">
          <el-descriptions :column="1" border class="custom-descriptions">
            <el-descriptions-item label="纳税人类型" class-name="my-content">
              <span>{{ formattedCustomerData?.taxpayerType || '-' }}</span>
            </el-descriptions-item>

            <el-descriptions-item label="发票类型" class-name="my-content">
              <span>{{ formattedCustomerData?.invoiceType || '-' }}</span>
            </el-descriptions-item>

            <el-descriptions-item label="开户银行" class-name="my-content">
              <span>{{ formattedCustomerData?.bankName || '-' }}</span>
            </el-descriptions-item>

            <el-descriptions-item label="开户账号" class-name="my-content">
              <span>{{ formattedCustomerData?.bankAccount || '-' }}</span>
            </el-descriptions-item>

            <el-descriptions-item label="开票地址" class-name="my-content">
              <span>{{ formattedCustomerData?.invoiceAddress || '-' }}</span>
            </el-descriptions-item>
          </el-descriptions>
        </div>

        <!-- 业务往来信息 -->
        <div v-if="activeTab === 'businessInfo'" class="form-content">
          <div class="business-header">
            <el-input
              placeholder="请输入合同编号/合同名称"
              style="width: 240px; float: right;"
              v-model="businessQuery.keyword"
              @keyup.enter="handleBusinessSearch"
              clearable
            >
              <template #append>
                <el-button icon="Search" @click="handleBusinessSearch"></el-button>
              </template>
            </el-input>
          </div>
          <el-table :data="businessList" style="width: 100%" border>
            <el-table-column prop="contractCode" label="合同编号" align="left" />
            <el-table-column prop="contractName" label="合同名称" align="left" />
            <el-table-column prop="contractAmount" label="合同金额" align="left">
              <template #default="scope">
                <span>{{ scope.row.contractAmount }}万元</span>
              </template>
            </el-table-column>
            <el-table-column prop="progress" label="当前进度" align="left" />
            <el-table-column prop="creator" label="创建人" align="left">
              <template #default="scope">
                <span>{{ scope.row.creatorName }}({{ scope.row.creator }})</span>
              </template>
            </el-table-column>
            <el-table-column prop="createTime" label="创建时间" align="left" />
          </el-table>
          <el-pagination
            style="margin-top: 20px; justify-content: flex-end;"
            v-model:current-page="businessQuery.pageNum"
            v-model:page-size="businessQuery.pageSize"
            :page-sizes="[10, 20, 30, 50]"
            :total="businessTotal"
            layout="total, sizes, prev, pager, next, jumper"
            @size-change="handleBusinessSizeChange"
            @current-change="handleBusinessCurrentChange"
          />
        </div>

        <!-- 信息变更 -->
        <div v-if="activeTab === 'changeInfo'" class="form-content">
          <el-table :data="changeList" style="width: 100%" border>
            <el-table-column prop="editor" label="编辑人" align="left">
              <template #default="scope">
                <span>{{ scope.row.editorName }}({{ scope.row.editor }})</span>
              </template>
            </el-table-column>
            <el-table-column prop="editTime" label="编辑时间" align="left" />
            <el-table-column prop="operation" label="操作" align="left">
              <template #default="scope">
                <el-link type="primary" @click="handleViewChangeDetail(scope.row)">查看详情</el-link>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination
            style="margin-top: 20px; justify-content: flex-end;"
            v-model:current-page="changeQuery.pageNum"
            v-model:page-size="changeQuery.pageSize"
            :page-sizes="[10, 20, 30, 50]"
            :total="changeTotal"
            layout="total, sizes, prev, pager, next, jumper"
            @size-change="handleChangeSizeChange"
            @current-change="handleChangeCurrentChange"
          />
        </div>
      </div>
    </div>

    <!-- 底部按钮 -->
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="handleClose">取消</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, reactive, computed, onMounted, watch } from 'vue'
import { ElMessage } from 'element-plus'

// 定义props
const props = defineProps({
  visible: {
    type: Boolean,
    required: true
  },
  customerData: {
    type: Object,
    default: () => ({})
  },
  tabsList: {
    type: Array,
    default: () => [
      { name: 'basic', label: '基本信息' },
      { name: 'financial', label: '财务信息' },
      { name: 'businessInfo', label: '业务往来信息' },
      { name: 'changeInfo', label: '信息变更' }
    ]
  }
})

// 定义emits
const emit = defineEmits(['close', 'update:visible'])

// 当前激活的标签
const activeTab = ref('basic')

// 当前显示的标签列表
const currentTabsList = computed(() => {
  return props.tabsList
})

// 业务往来信息查询参数
const businessQuery = reactive({
  pageNum: 1,
  pageSize: 10,
  keyword: ''
})

// 业务往来数据总数
const businessTotal = ref(0)

// 业务往来列表数据
const businessList = ref([])

// 信息变更查询参数
const changeQuery = reactive({
  pageNum: 1,
  pageSize: 10,
  keyword: ''
})

// 信息变更数据总数
const changeTotal = ref(0)

// 信息变更列表数据
const changeList = ref([])

// 存储格式化后的客户数据
const formattedCustomerData = ref({})

// 监听customerData变化，格式化数据以适应显示需求
watch(
  () => props.customerData,
  (newData) => {
    if (newData) {
      //根据父组件返回的数据格式进行处理
      formattedCustomerData.value = {
        // 从basicInfo获取基本信息字段
        creditCode: newData.basicInfo?.socialCreditCode || newData.creditCode || '-',
        companyName: newData.basicInfo?.companyName || newData.companyName || '-',
        registeredCapital: newData.basicInfo?.registeredCapital || newData.registeredCapital || '-',
        registeredAddress: newData.basicInfo?.registeredAddress || newData.registeredAddress || '-',
        mainBusiness: newData.basicInfo?.mainBusiness || newData.mainBusiness || '-',
        deliveryAddress: newData.basicInfo?.defaultDeliveryAddress || newData.deliveryAddress || '-',
        contactPerson: newData.basicInfo?.contactPerson || newData.contactPerson || '-',
        contactPhone: newData.basicInfo?.contactInformation || newData.contactPhone || '-',
        
        // 从financialInfo获取财务信息字段
        taxpayerType: newData.financialInfo?.taxpayerType || newData.taxpayerType || '-',
        invoiceType: newData.financialInfo?.invoiceType || newData.invoiceType || '-',
        bankName: newData.financialInfo?.invoicingBank || newData.bankName || '-',
        bankAccount: newData.financialInfo?.invoicingBankNumber || newData.bankAccount || '-',
        invoiceAddress: newData.financialInfo?.invoicingAddress || newData.invoiceAddress || '-'
      }
    }
  },
  { deep: true, immediate: true }
)

// // 获取纳税人类型文本
// const getTaxpayerTypeText = (type) => {
//   const typeMap = {
//     'general': '一般纳税人',
//     'small': '小型纳税人'
//   }
//   return typeMap[type] || '-'  
// }

// // 获取发票类型文本
// const getInvoiceTypeText = (type) => {
//   const typeMap = {
//     'special': '增值税专用发票',
//     'normal': '普通发票',
//     'other': '其他'
//   }
//   return typeMap[type] || '-'  
// }

// 处理标签点击
const handleTabClick = (tab) => {
  activeTab.value = tab.name
  
  // 如果切换到业务往来信息，加载数据
  if (tab.name === 'businessInfo') {
    getBusinessList()
  }
  
  // 如果切换到信息变更，加载数据
  if (tab.name === 'changeInfo') {
    getChangeList()
  }
}

// 获取业务往来列表
const getBusinessList = () => {
  // 模拟数据
  businessList.value = []
  businessTotal.value = businessList.value.length
}

// 获取信息变更列表
const getChangeList = () => {
  // 模拟数据
  changeList.value = []
  changeTotal.value = changeList.value.length
}

// 业务往来搜索
const handleBusinessSearch = () => {
  businessQuery.pageNum = 1
  getBusinessList()
}

// 业务往来分页大小改变
const handleBusinessSizeChange = (val) => {
  businessQuery.pageSize = val
  businessQuery.pageNum = 1
  getBusinessList()
}

// 业务往来当前页码改变
const handleBusinessCurrentChange = (val) => {
  businessQuery.pageNum = val
  getBusinessList()
}

// 信息变更分页大小改变
const handleChangeSizeChange = (val) => {
  changeQuery.pageSize = val
  changeQuery.pageNum = 1
  getChangeList()
}

// 信息变更当前页码改变
const handleChangeCurrentChange = (val) => {
  changeQuery.pageNum = val
  getChangeList()
}

// 查看变更详情
const handleViewChangeDetail = (row) => {
  ElMessage.info('查看变更详情功能待实现')
}

// 处理关闭
const handleClose = () => {
  activeTab.value = 'basic'
  emit('update:visible', false)
  emit('close')
}

</script>

<style scoped>
/* 对话框底部样式 */
.dialog-footer {
  display: flex;
  justify-content: flex-end;
  margin-top: 20px;
}

/* 主要内容容器 - 强制左右布局 */
.main-content-container {
  display: flex !important;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  overflow: hidden;
  min-height: 500px;
}

/* 左侧选项卡样式 - 固定宽度 */
.left-sidebar {
  width: 180px !important;
  background-color: #f5f7fa;
  border-right: 1px solid #dcdfe6;
  flex-shrink: 0;
}

.tab-container {
  display: flex;
  flex-direction: column;
}

.tab-item {
  padding: 12px 20px;
  cursor: pointer;
  transition: all 0.3s;
  border-left: 3px solid transparent;
  border-bottom: 1px solid #e4e7ed;
}

.tab-item:hover {
  background-color: #e6f2ff;
}

.tab-item.active {
  background-color: #2457d7 !important;
  color: #ffffff !important;
  border-left-color: #1890ff;
}

.tab-text {
  font-size: 14px;
  font-weight: 500;
}

/* 右侧内容区域 - 确保正确显示 */
.right-content {
  flex: 1;
  padding: 20px;
  background-color: #ffffff;
  overflow-y: auto;
}

/* 表单内容区域 */
.form-content {
  width: 100%;
}

/* 描述列表样式 - 关键调整 */
.custom-descriptions {
  width: 100% !important;
  border: 1px solid #ebeef5;
  border-radius: 4px;
  overflow: hidden;
  /* .el-descriptions__body {
    .el-descriptions__table {
      .el-descriptions__cell {
        margin: 15px 0;
      }
    }
  } */
}
/* 强制使用Element Plus的列布局 */
.custom-descriptions :deep(.el-descriptions__row) {
  display: flex;
  width: 100%;
}
:deep(.my-content) {
  padding: 16px 16px !important;
}
/* 标签列样式 - 左侧蓝灰色背景 */
.custom-descriptions :deep(.el-descriptions__cell--label) {
  width: 150px !important;
  min-width: 150px !important;
  background-color: #f5f7fa !important;
  font-weight: 500;
  color: #606266;
  padding: 22px 20px !important;
  border-right: 1px solid #ebeef5;
  border-bottom: 1px solid #ebeef5;
  text-align: right;
  flex-shrink: 0;
}

/* 内容列样式 - 右侧白色背景 */
.custom-descriptions :deep(.el-descriptions__cell--content) {
  flex: 1;
  padding: 22px 20px !important;
  border-bottom: 1px solid #ebeef5;
  color: #303133;
  min-width: 0;
  word-break: break-all;
}

/* 移除最后一行的底边框 */
.custom-descriptions :deep(.el-descriptions__row:last-child .el-descriptions__cell) {
  border-bottom: none;
}

/* 业务往来头部样式 */
.business-header {
  margin-bottom: 16px;
  overflow: hidden;
}

/* 表格样式调整 */
:deep(.el-table) {
  width: 100%;
  border: 1px solid #ebeef5;
}

/* 分页样式 */
:deep(.el-pagination) {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}
</style>